<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>缺陷分类占比</title>
    <link rel="stylesheet" href="/css/index.css">
    <script type="text/javascript" src="/js/jquery-3.5.1.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/index.js"></script>
    <script src="/js/echarts.min.js"></script>
</head>
<body>
<div id="app">
    <div>
        项目：
        <el-select v-model="value1" placeholder="请选择" @change="selectBy">
            <el-option
                    v-for="project in projects"
                    :label="project.projectName"
                    :value="project.projectId">
            </el-option>
        </el-select>
        <span class="demonstration">创建时间：</span>
        <el-date-picker
                v-model="date1"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd">
        </el-date-picker>-
        <span class="demonstration"></span>
        <el-date-picker
                v-model="date2"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd">
        </el-date-picker>
        <el-button type="primary" @click="selectWorkLogSameMonth()">查询</el-button>
    </div></br>
    <div>
        <el-table
                :data="tableData"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                border
                default-expand-all
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column
                    prop="pname"
                    label="项目名称"
                    sortable
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="登记时间"
                    sortable
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="登记人"
                    sortable
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="hours"
                    label="登记工时">
            </el-table-column>
        </el-table>
    </div>
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageIndex"
                :page-sizes="[3, 5, 10]"
                :page-size="number"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dataCount">
        </el-pagination>
    </div>
</div>
<script type="text/javascript">
    var _this;
    var app = new Vue({
        el:"#app",
        data:{
            tableData : null,
            projects : null,
            value1 : "",
            pid : 0,
            date1 : "",
            date2 : "",
            pageIndex : 1,
            number : 3,
            dataCount : 0,
        },
        created:function(){
            this.selectproject();
            this.selectWorkLogSameMonth();
        },
        methods:{
            handleSizeChange(val) {
                var _this = this;
                _this.number = val;
                _this.selectWorkLogSameMonth();
            },
            handleCurrentChange(val) {
                var _this = this;
                _this.pageIndex = val;
                _this.selectWorkLogSameMonth();
            },
            selectBy : function(id){
              var _this = this;
              _this.pid=id;
            },

            selectWorkLogSameMonth : function(){
                var _this = this;
                $.ajax({
                    url : "/worklog/samemonth",
                    type : "get",
                    data : {
                        id : _this.pid,
                        pageIndex : _this.pageIndex,
                        number : _this.number,
                        date1 : _this.date1,
                        date2 : _this.date2
                    },
                    dataType : "json",
                    success : function(data) {
                        _this.tableData=data.list;
                        _this.dataCount=data.object.dataCount;
                    },
                    error : function() {

                    }
                });
            },

            selectproject : function(){
                var _this = this;
                $.ajax({
                    url : "/project",
                    type : "get",
                    dataType : "json",
                    success : function(data) {
                       _this.projects=data.list;
                    },
                    error : function() {

                    }
                });
            }
        },

    });

</script>
</body>
</html>